<template>
  <div class="supplier-panel">
    <el-row :gutter="20">
      <el-col :md="20" :lg="12" class="mar-b-20" v-for="(item, index) of records" :key="index">
        <div class="panel-box v-align-c pad-t-30 pad-b-30 pad-r-30" @click="goDetailPage(item.supplierId)">
          <div class="flex-center flex-col supplier-name-box height-per-100 width-152">
            <span class="font-white font-20 font-w line-1">{{item.supplierName}}</span>
            <span class="sort font-14 mar-t-20" v-if="item.supplierCategoryNames">{{item.supplierCategoryNames}}</span>
            <span class="rank-num width-52 height-52 font-white font-24 font-w" v-if="index<=2">{{index+1}}</span>
          </div>
          <div class="split-line"></div>
          <div class="flex-col data-info pad-l-29 flex-item">
            <div class="flex flex-between">
              <div>
                <span class="font-14 gray-color">供货量</span><span class="font-16 font-white mar-l-9" v-formatNum="item.goodsNum"></span>
              </div>
              <div>
                <span class="font-14 gray-color">销量</span><span class="font-16 font-white mar-l-9" v-formatNum="item.salesNum"></span>
              </div>
              <div>
                <span class="font-14 gray-color">销售额</span><span class="font-16 red-color mar-l-9" v-formatNum="item.orderPrice"></span>
              </div>
              <div>
                <span class="font-14 gray-color">退款率</span><span class="font-16 font-white mar-l-9">{{item.refundRate}}</span>
              </div>
            </div>
            <div class="v-align-c flex-between other-info height-68 pad-t-10 pad-b-10 pad-l-16 pad-r-20" v-if="item.orderPriceTop3[0]">
              <div class="flex-col flex-center">
                <span class="font-24 font-w font-white mar-t-2">{{item.orderPriceTop3[0]['sortNo']}}</span>
                <span class="font-12 gray-color mar-t-10">全网销售额排名</span>
              </div>
              <div class="flex flex-item" style="margin-left:68px">
                <div class="flex" v-if="item.orderPriceTop3[0]['mainImage']">
                  <img class="width-48 height-48" :src="item.orderPriceTop3[0]['mainImage']" alt="">
                </div>
                <div class="font-12 mar-l-9 flex-col goods-info">
                  <span class="font-white line-1">{{item.orderPriceTop3[0]['title']}}</span>
                  <span class="font-white">售价￥{{item.orderPriceTop3[0]['sellPrice']}}&nbsp;&nbsp;<span class="gray-color" v-if="item.orderPriceTop3[0]['scribingPrice']">/ 原价： {{item.orderPriceTop3[0]['scribingPrice']}}</span></span>
                </div>
              </div>
              <div class="flex" v-if="item.orderPriceTop3.length > 1">
                <div>
                 <img v-if="item.orderPriceTop3[1]['mainImage']" class="width-48 height-48 mar-r-20" :src="item.orderPriceTop3[1]['mainImage']" alt="">
                </div>
                <div v-if="item.orderPriceTop3.length === 3">
                  <img v-if="item.orderPriceTop3[2]['mainImage']" class="width-48 height-48" :src="item.orderPriceTop3[2]['mainImage']" alt="">
                </div>
              </div>
            </div>
            <div v-else class="flex-center other-info height-68 pad-l-16 pad-r-20 font-white">
              暂无商品
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      records: []
    }
  },
  mounted() {
    const that = this
    this.$bus.$on('getRecords', (res) => {
      that.records = []
      that.records = res
      // that.records.forEach(item => {
      //   item.goodsNum = that.formatData(item.goodsNum)
      //   item.orderPrice = that.formatData(item.orderPrice)
      //   item.salesNum = that.formatData(item.salesNum)
      // })
    })
  },
  methods: {
    goDetailPage(supplierId) {
      this.$router.push({ path: `/dataAnalysis/supplier-analysis/detail/index?supplierId=${supplierId}` })
    },
    // 格式化数据信息
    formatData(num) {
      if (num < 1000) return num
      if (num >= 1000 && num < 10000) {
        const _num = (num * 1 / 1000).toFixed(2)
        return `${_num}k`
      }
      if (num >= 10000) {
        const _num = (num * 1 / 10000).toFixed(2)
        return `${_num}w`
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .supplier-panel {
    .panel-box {
      background: #252529;
      position: relative;
      .supplier-name-box {
        padding-left: 36px;
        padding-right: 36px;
        .rank-num {
          position: absolute;
          top: 0;
          left: 0;
          padding-top: 8px;
          padding-left: 8px;
          background:linear-gradient(to left top,transparent 50%,#FF8227 50%);
        }
        .sort {
          color: #1890FF;
          border: 1px solid #1890FF;
          border-radius: 4px;
          padding: 0px 9px;
        }
      }
      .data-info {
        justify-content: center;
        .other-info {
          background: #3A3A3E;
          margin-top: 39px;
          img {
            border-radius: 4px;
          }
          .goods-info {
            justify-content: space-around;
          }
        }
      }
      .split-line {
        height: 123px;
        border-left: 1px dashed rgba(255,255,255,0.5);
      }
    }
    .panel-box:hover{
      cursor:pointer
    }
    .line-1{
      line-height: 1.4;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .gray-color{
      color: rgba(255,255,255,0.5);
    }
    .red-color {
      color: #FF2C1E;
    }
  }
</style>